<template>    
  <h1>只读属性：readonly</h1>
  {{nameObj.name}}

  <h1>计算属性：readonly</h1>
  <button @click="add">{{num}}</button><br />
  计算属性的值：{{count}}<br />

  <div ref="hello" style="color:red;font-weight:bold;">获取dom元素</div>
</template>

<script>
  import {ref, reactive, toRef, toRefs, readonly, computed, watch, watchEffect, onMounted} from 'vue'

  export default {
    name: 'Vue3Index',
    emits: ['toggle'], //定义说明父组件的自定义事件
    created()
    {
      this.$emit('toggle', false);
    },
    setup()
    {
      //定义数据
      let nameObj = reactive({name: '张三'})

      //定义一个只读属性
      let readonlyObj = readonly(nameObj)

      //只读修改
      // setTimeout(() => {
      //   readonlyObj.name = 'zhangsan'
      // }, 1000)


      //计算属性
      const num = ref(0)

      //方法
      function add()
      {
        num.value++
      }

      //计算属性
      const count = computed(() => {
        return num.value * 2
      })


      //监听 watch 
      var name = ref('张三')

      setTimeout(() => {
        name.value = 'zhangsan'
      }, 1000)

      //监听数据的变化
      watch(name, (oldVal, newVal) => {
        console.log(oldVal+'------'+newVal)
      })


      //获取dom元素
      var hello = ref(null)

      //要在页面渲染后才能够获取到dom节点
      onMounted(() => {
        console.log(hello.value)
        
        //获取dom节点的属性
        console.log(hello.value.style.color)
      })

      return {
        nameObj,
        num,
        add,
        count,
        hello
      }
    }
  }
</script>